// 字体
.generate-font-sizes(@sizes) {
    each(@sizes, {
        .--m-fs@{key} {
            font-size: @value;
        }
    });
}

// 边距
//#region
.generate-gap(@gap, @direction) {
    each(@gap, {
        .--m-m@{key} {
            margin: @value;
        }

        .--m-p@{key} {
            padding: @value;
        }

        .gap-direction(@key, @value, @direction);
    });
}

.gap-direction(@gapKey, @gapValue, @direction) {
    each(@direction, {
        .--m-m@{key}@{gapKey} {
            margin-@{value}: @gapValue;
        }

        .--m-p@{key}@{gapKey} {
            padding-@{value}: @gapValue;
        }
    });
}

//#endregion

// 字体颜色 and 背景颜色
.generate-color-bgColor(@color) {
    each(@color, {
        .--m-c-@{key} {
            color: @value;
        }

        .--m-bg-@{key} {
            background-color: @value;
        }
    });
}

.generate-flex(@flex) {
    each(@flex, {
        .--m-jc-@{key} {
            justify-content: @value;
        }

        .--m-ai-@{key} {
            align-items: @value;
        }
    })
}

// 通用循环样式 （单个样式）
.loop-prop(@prop, @i: 24, @end: 0, @skip: 1, @insertClass: ~'') when (@i > @end) {
    // insertClass为空时，赋值为prop
    @finalClass: if((@insertClass=~''), @prop, @insertClass);

    .--m-@{finalClass}@{i} {
        @{prop}: @i;
    }

    .loop-prop(@prop, (@i - @skip), @end, @skip, @insertClass);
}

// 通用循环样式
.loop-object(@obj, @prop, @classname: ~'') {
    @finalClassname: if((@classname=~''), @prop, @classname);

    each(@obj, {
        .--m-@{finalClassname}-@{key} {
            @{prop}: @value;
        }
    });
}
/*
    @prop: 属性
    @curr: 开始值
    @end: 结束值
    @skip: 步长
    @unit: 单位
    @insertClass: 插入的类名
    @expamle: .loop(flex, 1, 24, 1, %, flex) => .--m-flex1 { flex: 1%; }
*/
.loop-prefix(@prop, @curr, @end: 0, @skip: 1, @unit:0px, @insertClass:~"") when (@curr > @end){
    @finalClass: if((@insertClass=~''), @prop, @insertClass);

    .--m-@{finalClass}@{curr} {
        @{prop}: @curr+@unit;
    }

    .loop-prefix(@prop, (@curr - @skip), @end, @skip, @unit, @insertClass);
}

/*
    @prop: 属性
    @curr: 开始值
    @end: 结束值
    @skip: 步长
    @unit: 单位
    @insertClass: 插入的类名
    @expamle: .loop(flex, 1, 24, 1, %, flex) => .--m-flex1 { flex: 1%; }
*/
.loop(@prop, @curr, @end: 0, @skip: 1, @unit:0px, @insertClass:~"") when (@curr > @end){
    @finalClass: if((@insertClass=~''), @prop, @insertClass);

    .m-@{finalClass}@{curr} {
        @{prop}: @curr+@unit;
    }

    .loop(@prop, (@curr - @skip), @end, @skip, @unit, @insertClass);
}